<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts" style="width: 100%; height: 100%" :width="width" :height="height" :option="option" :type="type" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, nextTick, computed } from "vue";
import echartsDom from "./echartsDom.vue";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  itemParam: {
    type: Object,
    default: () => {}
  },
  itemValue: {
    type: Number,
    default: 0
  }
});
const isShowEcharts = ref(true);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);

option.value = {};
const isOnTheHour = timeStr => {
  const regex = /^(?:[01]\d|2[0-3])(?::[0-5]\d){2}$/;
  if (!regex.test(timeStr)) {
    return false;
  }
  const [hours, minutes] = timeStr.split(":");
  return minutes === "00";
};

const min_num = computed(() => {
  return JSON.parse(props.itemParam.itemDesc).min;
});
const max_num = computed(() => {
  return JSON.parse(props.itemParam.itemDesc).max;
});
setTimeout(() => {
  isShowEcharts.value = true;
  const commonTextStyle = {
    fontSize: 14,
    fontWeight: 600,
    align: "center"
  };
  option.value = {
    backgroundColor: props.type == "dark" ? "#001e3b" : "",
    // title: {
    //   text: ``
    //   // top: "8", // title 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'
    //   // left: "8", // title 组件离容器左侧的距离。 ...同上
    //   // textStyle: {
    //   //   // 主标题文字的设置
    //   //   fontSize: 16,
    //   //   fontWeight: "normal"
    //   // }
    // },
    title: {
      // show: true,
      // text: props.itemParam.key,
      // // subtext,
      // textStyle: commonTextStyle,
      // // subtextStyle: commonTextStyle,
      // textAlign: "center",
      // left: "48%",
      // top: "71%",
      // itemGap: 8
    },
    tooltip: {
      show: true,
      formatter: function (params) {
        const title = `<span style=\"font-weight: 600;\">${props.itemParam.itemName}</span>`;
        const v = `<span>温度：<span style=\"font-weight: 600;\">${params.value}℃</span></span>`;
        return `${title}<br/>${v}`;
      },
      confine: true
    },
    series: [
      {
        type: "gauge", // 测量仪
        center: ["50%", "60%"], // 图形坐标位置 水平, 垂直
        radius: "100%", // 控制饼图的大小
        min: min_num.value ? min_num.value : 16,
        max: max_num.value ? max_num.value : 29,
        // startAngle: 90, // 开始位置
        // endAngle: -270, // 结束位置
        progress: {
          show: true,
          roundCap: true,
          width: 6
        },
        itemStyle: {
          color: "#4C9CFF", //#3B82F6FF
          shadowColor: "#E7EEFB80"
        },
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 6
          }
        },
        pointer: {
          width: 3,
          itemStyle: {
            color: "#4C9CFF" //#3B82F6FF
          }
        },
        axisTick: {
          distance: 2,
          length: 4,
          lineStyle: {
            width: 1
          }
        },
        splitLine: {
          distance: 2,
          length: 8,
          lineStyle: {
            width: 1
          }
        },
        axisLabel: {
          distance: 14,
          fontSize: 9
        },
        detail: {
          show: false
        },
        data: [
          {
            value: props.itemValue // 可写变量  此value 对应 formatter: '{value}%' 中的Value  64类型不对请用'64'
            // detail: {
            //   // 仪表盘边框数据详情，用于显示数据。
            //   valueAnimation: false, // 是否开启标签的数字动画。
            //   offsetCenter: ["0%", "-15%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
            //   fontSize: 16 // 文字的字体大小。
            // },
            // name: `${min_num.value ? min_num.value + "~" : "≤"}${max_num.value}`,
            // nameStyle: {
            //   fontSize: 12
            // }
          }
        ]
        // pointer: {
        //   // 显示仪表盘指针
        //   show: false // 是否显示仪表盘指针
        // },
        // progress: {
        //   // 展示当前进度。
        //   show: true, // 是否展示进度条
        //   overlap: false, // 是否重叠
        //   roundCap: true, // 是否圆顶
        //   clip: false, // 是否裁掉超出部分
        //   itemStyle: {
        //     color: {
        //       type: "linear",
        //       x: 0,
        //       y: 0,
        //       x2: 0,
        //       y2: 1,
        //       colorStops: [
        //         {
        //           offset: 0,
        //           color: "#f3f3f3" // 0% 处的颜色
        //         },
        //         {
        //           offset: 1,
        //           color: "#3a82f6" // 100% 处的颜色
        //         }
        //       ],
        //       global: false // 缺省为 false
        //     }
        //   }
        // },
        // axisLine: {
        //   // 设置线条
        //   lineStyle: {
        //     width: 16, // 线条宽度
        //     color: [[1, "#e6ebf8"]] // 不透明度, 线条设置背景色
        //   }
        // },
        // splitLine: {
        //   // 分隔线样式。
        //   show: false, // 是否显示分隔线。
        //   distance: 0, // 分隔线与轴线的距离。
        //   length: 1033 // 分隔线线长。支持相对半径的百分比。
        // },
        // axisTick: {
        //   // 刻度样式。
        //   show: false // 是否显示刻度。
        // },
        // axisLabel: {
        //   //刻度标签。
        //   show: false, // 是否显示标签。
        //   distance: 50 // 标签与刻度线的距离。
        // },
        // data: [
        //   {
        //     value: props.itemValue, // 可写变量  此value 对应 formatter: '{value}%' 中的Value  64类型不对请用'64'
        //     detail: {
        //       // 仪表盘边框数据详情，用于显示数据。
        //       valueAnimation: false, // 是否开启标签的数字动画。
        //       offsetCenter: ["0%", "-15%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
        //       fontSize: 16 // 文字的字体大小。
        //     },
        //     name: `${min_num.value ? min_num.value + "~" : "≤"}${max_num.value}`,
        //     nameStyle: {
        //       fontSize: 12
        //     }
        //   }
        // ],
        // detail: {
        //   //仪表盘详情，用于显示数据 仪表盘中间数字数据。
        //   color: "#3786f7", // 文本颜色，默认取数值所在的区间的颜色
        //   formatter: "{value}°C" // 格式化函数或者字符串  formatter: function (value) { return value.toFixed(0);}
        // }
      }
    ]
  };
}, 200);
</script>

<style scoped lang="scss">
.parent {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.neikongp {
  position: absolute;
  top: 15px;
  right: 13px;
  font-size: 12px;
  font-weight: 600;
  color: #ff0844;
}
</style>
